---
title: 為何選擇 Astro？
description: "Astro 是個 web 框架，用於打造以內容為中心的網站，例如部落格、行銷、電商網站。進一步了解為何它是打造網站的絕佳選擇。"
i18nReady: true
---

**Astro** 是個 web 框架，用於打造**以內容為中心的網站**，例如部落格、行銷、電商網站。Astro 以開創全新的[前端架構](/zh-tw/concepts/islands/)聞名，相較其他框架使用更少 JavaScript，複雜度更低。需要兼顧網站載入速度與 SEO 嗎？Astro 非常適合你。

## 特色

Astro 是多合一的 web 框架，打造網站所需一應俱全。數以百計的[整合](https://astro.build/integrations/)和 [API hooks](/zh-tw/reference/integrations-reference/) 任君挑選，滿足客製需求。

以下是一些亮點：

- **[群島](/zh-tw/concepts/islands/)**：以元件為基礎的 web 架構，專為以內容為中心的網站設計。
- **[跨 UI 框架](/zh-tw/guides/framework-components/)**：支援 React、Preact、Svelte、Vue、Solid、HTMX、web component 等。
- **[伺服器優先](/zh-tw/guides/on-demand-rendering/)**：避免在客戶端執行耗費資源的算繪。
- **[預設零 JS](/zh-tw/basics/astro-components/)**：減少拖慢網站速度的客戶端 JavaScript。
- **[內容合集](/zh-tw/guides/content-collections/)**：統一管理、驗證 Markdown 內容，同時提供 TypeScript 型別安全。
- **[客製化](/zh-tw/guides/integrations-guide/)**：Partytown、MDX 等數以百計的整合任君挑選。

## 設計理念

為何要在眾多網頁框架中選擇 Astro 呢？以下五個核心設計理念，有助於解釋為什麼我們要打造 Astro、它解決了甚麼問題以及為什麼 Astro 可能是專案或團隊的最佳選擇。

Astro 是⋯⋯

1. **[以內容為主](#以內容為主)**：Astro 專為內容豐富的網站設計。
2. **[伺服器優先](#伺服器優先)**：由伺服器算繪 HTML 的網站會執行得更加快速。
3. **[預設即迅速](#預設即迅速)**：不太可能用 Astro 寫出緩慢的網站。
4. **[簡單易使用](#簡單易使用)**：你不需要是專家，也能用 Astro。
5. **[注重開發者](#注重開發者)**：你應該享有成功打造網站的所需資源。

### 以內容為主

**Astro 專為內容豐富的網站設計**。這包括大部分行銷、出版、文件、部落格、作品集以及電子商務網站等。有內容要展示？那就要讓讀者能夠快速看到。

相較之下，大多數現代 web 框架都是為了建立*網頁應用程式*而設計的。這些框架更適合用來建構更複雜、更像應用程式的網站；管理者儀錶板、收件匣、社群網路、待辦事項列表，甚至是類原生應用程式如 [Figma](https://figma.com/) 和 [Ping](https://ping.gg/)。然而，如此複雜的設計可能導致傳遞內容時效能低落。

Astro 從靜態網站產生器起家，至始便著重在內容。這使得 Astro 能在兼顧內容與讀者的前提下，將網站**切合實際地發展成高效、強力、動態的應用程式**。權衡之下，Astro 選擇著重在極致的性能表現，與以建構應用程式為目標的 web 框架不同。

### 伺服器優先

**Astro 盡可能使用伺服器端算繪而非客戶端算繪**。這和傳統的伺服器端框架（PHP、WordPress、Laravel 與 Ruby on Rails 等）過去幾十年的使用方法相同。你毋須再學習另一套伺服語言，因為 Astro 依然使用 HTML、CSS 以及 JavaScript（或是 TypeScript，如果你比較喜歡的話）。

這種方法和其他現代 JavaScript web 框架如 Next.js、SvelteKit、Nuxt、Remix 等有顯著差異。這些框架在客戶端算繪整個網站，再搭配伺服器端算繪解決效能問題。這種方式稱作**單頁應用程式（SPA）**。相較之下，Astro 使用的則是**多頁應用程式（MPA）**。

SPA 有它的優勢，然而代價是額外的複雜度及折衷的性能。這些取捨會影響網頁的性能，例如[可互動時間（TTI）](https://web.dev/interactive/)這種重要指標。不過這對以內容為中心的網站並沒有太大的意義，因為對於這類網站來說，首次載入性能才是關鍵。

Astro 優先在伺服器端算繪，只在需要且必要時切換成客戶端算繪。你可以選擇加入在客戶端執行的 UI 框架元件，也能善用 Astro 的轉場過渡動畫路由（view transitions router），精準控制頁面所需的轉場特效動畫。Astro 提供高效的預設算繪模式，使用者可在預先算繪（pre-rendered）和需要時算繪（on-demand rendered）兩種模式間切換、延伸。

### 預設即迅速

擁有良好性能一直都是重要的，但對內容為主的網站來說*特別*關鍵。事實證明，差勁的性能會讓你失去參與度、轉換率及金錢。舉例來說：

- 每快 100 毫秒 → 轉換率增加 1%（[Mobify](https://web.dev/why-speed-matters/)，年收入增加 38 萬美金）
- 加快 50% → 銷售量增加 12%（[AutoAnything](https://www.digitalcommerce360.com/2010/08/19/web-accelerator-revs-conversion-and-sales-autoanything/)）
- 加快 20% → 轉換率增加 10%（[Furniture Village](https://www.thinkwithgoogle.com/intl/en-gb/marketing-strategies/app-and-mobile/furniture-village-and-greenlight-slash-page-load-times-boosting-user-experience/)）
- 加快 40% → 註冊率增加 15%（[Pinterest](https://medium.com/pinterest-engineering/driving-user-growth-with-performance-improvements-cfc50dafadd7)）
- 加快 850 毫秒 → 轉換率增加 7%（[COOK](https://web.dev/why-speed-matters/)）
- 每慢 1 秒 → 減少 10% 使用者（[BBC](https://www.creativebloq.com/features/how-the-bbc-builds-websites-that-scale)）

許多 web 框架讓開發者很容易建立出看起來很棒，但部署後載入速度非常慢的網站。JavaScript 通常是罪魁禍首，因為使用者的手機和低功耗設備的速度鮮少能和開發者的筆電相比。

Astro 的奇妙之處就在於它如何將上述兩種價值（內容為中心和伺服器優先 MPA 架構）結合，並在做出衡量後提供其他框架所沒有的特點。結果是每個網站都擁有開箱即用的出色性能。這也是我們的目標：**幾乎不可能用 Astro 建構出緩慢的網站。**

當建構相同的網站時，Astro 網站與最受歡迎的 React web 框架相比可以[在減少 90% JavaScript 的同時提升 40% 載入速度](https://twitter.com/t3dotgg/status/1437195415439360003)。口說無憑，歡迎觀看：Astro 的性能讓 Ryan Carniato（Solid.js 與 Marko 作者）[啞口無言](https://youtu.be/2ZEMb_H-LYE?t=8163)。


### 簡單易使用

**Astro 的目標是讓每位 web 開發者能輕鬆上手**。無論技術水準、過去開發經驗，Astro 都讓人感到熟悉且平易近人。

`.astro` UI 語言是 HTML 的超集合：任何合法的 HTML 同時也是合法的 Astro 模板語法！因此，如果你會寫 HTML，你就會寫 Astro 元件！除此之外，Astro 也借鏡其他元件語言受歡迎的功能，例如 JSX 表達式（React）和預設 CSS 作用域（Svelte 與 Vue）。與 HTML 高度相似的特點，使我們在實作漸進增強（progressive enhancement）和常見無障礙設計模式時不需耗費太多力氣。

我們確保開發者可以在 Astro 使用自己喜愛、熟悉的 UI 元件語言，以及重複使用現有的元件。Astro 支援 React、Preact、Svelte、Vue、Solid 等，甚至包含 web component。

Astro 設計成比其他 UI 框架及語言還簡單，其中一個重要原因是：Astro 是用來在伺服器而非瀏覽器上算繪。這就代表你毋需擔心像：hook（React）、stale closure（還是 React）、ref（Vue）、observable（Svelte）、atom、selector、reaction 或 derivation。由於使用者無法在伺服器端算繪時與頁面互動，所以這些複雜度都消失了。

我們最喜歡的其中一句話是：**選擇加入複雜度（opt in to complexity）**。設計 Astro 時，我們盡可能地在開發者體驗中去除「必須的複雜度」，特別是當你第一次使用這套框架時。你可以在 Astro 中只用 HTML 和 CSS 建立「Hello World」範例網站，而當你需要建立更強大的的東西時，隨時可以在過程中逐漸增加新功能及 API。

### 注重開發者

我們深信，當開發者享受使用 Astro 時，它才算是一個成功的專案。Astro 提供一切所需，幫助你建立網站。

Astro 致力發展開發者工具，例如從打開終端機那一刻就獲得的良好 CLI 體驗；支援 syntax highlighting、TypeScript、Intellisense 的官方 VS Code 外掛；由數百位貢獻者積極維護、翻譯成 14 種語言的文件。

我們的 Discord 社群熱情友好、尊重他人、海納百川，非常樂意提供協助、動力與鼓勵。開發專案時需要協助嗎？在 `#support` 建立一則討論串吧！想分享你的 Astro 網站、部落格文章、影片，甚至是手邊做到一半的事情嗎？`#showcase` 頻道會給予安全的回饋和建設性的評論。歡迎參與我們定期舉辦的即時活動，例如每週的社群會議、「Talking and Doc'ing」、API／臭蟲掃蕩。

身為開源專案，我們歡迎社群成員參與貢獻，不論形式、規模、經驗、水準。在此邀請你參加路線討論，一同探討 Astro 未來的發展方向，也期盼你對核心 codebase、編譯器、文件、語言工具、網站，以及其他專案作出修正和開發功能。
